<template>
  <el-scrollbar class="main-scroll">
    <div class="banner capintro">
      <img :src="requireImg('intro-banner.png')" />
    </div>
    <breadcrumb></breadcrumb>
    <div class="groupWrapper" v-show="!isChildren">
      <div class="row" v-for="row in intro" :key="row.title" v-if="row.child.length != 0">
        <div class="container-x-suit">
          <div class="container" >
            <h3 class="title">{{ row.name }}</h3>
            <div class="flex">
              <group-card
                v-for="group in row.child"
                :key="group.name"
                :data="group"
                @click.native="routerSkip(group.id)" />
            </div>
            <div class="more">
              <div class="more-div">
                <a href="javscript:;">点击查看更多</a>
                <div style="clear:both"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view v-show="isChildren"></router-view>
    <m-footer></m-footer>
  </el-scrollbar>
</template>

<script>
import Breadcrumb from '@/base/breadcrumb/breadcrumb'
import MFooter from '@/components/footer/footer'
import GroupCard from '@/components/group-card/group-card'
// import capData from "./data
import { requireImgMixin } from '@/common/js/mixin'
import { getData } from '@/api/capintro'
export default {
  name: 'CarIntro',
  mixins: [requireImgMixin],
  data() {
    return {
      isChildren: false,
      intro: []
    }
  },
  mounted() {
    getData().then(response => {
      this.intro = response.data
    })
  },
  methods: {
    routerSkip(id) {
      this.$router.push(`/capintro/${id}`)
    }
  },
  watch: {
    $route: {
      handler: function(newR) {
        if (newR.params.id) {
          this.isChildren = true
          return
        }
        this.isChildren = false
      },
      immediate: true
    }
  },
  components: {
    Breadcrumb,
    MFooter,
    GroupCard
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl';
@import '~common/stylus/mixin.styl';

.banner {
  &.capintro {
    width: 100%;
    height: 477px;
    background-color: $color-info;

    img {
      height: 100%;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.row {
  background-color: #FFF;
  padding-bottom: 60px;

  &:nth-of-type(even) {
    background-color: #f4f4f4;
  }

  .container {
    padding: 0 20px;
    .more {
      margin: 42px 0;
      .more-div {
        a{
          color #000
          float right
          text-decoration none
          display inline
        }
      }
    }
    h3.title {
      text-align: center;
      font-size: 30px;
      height: 150px;
      line-height: 150px;
    }

    .flex {
      display: flex;
      justify-content: space-around;
    }
  }
}

@media (max-width: $media-smail) {
  .flex {
    flex-direction: column !important;

    .item {
      margin: 0 auto !important;
    }
  }
}
</style>
